<div class="user-login" flyInOut>
    <form (ngSubmit)="login()" novalidate [formGroup]="loginForm" role="form">
        <div class="form-group">

            <label for="Email">邮箱地址</label>
            <!--formControlName="email"绑定模型-->
            <input formControlName="email" type="email" class="form-control" name="email" #email placeholder="Email">
            <!--warning 提示框-->
            <label>{{email.className}}</label>

            <alert type="warning" *ngIf="formErrors.email"> {{ formErrors.email }}</alert>

        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input formControlName="password" type="password" class="form-control" #password name="password" placeholder="Password">
            <label>{{password.className}}</label>

            <alert type="warning" *ngIf="formErrors.password"> {{ formErrors.password }}</alert>

        </div>
        <button type="submit" class="btn btn-primary" [disabled]="loginForm.invalid">提交</button>
    </form>
    <p>指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。 可以利用这些 CSS 类来修改控件的外观，显示或隐藏消息。</p>
    <table class="table table-hover">
        <tr>
            <th>
                <p>State</p>
                <p>状态</p>
            </th>
            <th>
                <p>Class if true</p>
                <p>为真时的 CSS 类</p>
            </th>
            <th>
                <p>Class if false</p>
                <p>为假时的 CSS 类</p>
            </th>
        </tr>
        <tr>
            <td>
                <p>Control has been visited</p>
                <p>控件已经被访问过</p>
            </td>
            <td>
                <p><code>ng-touched</code></p>
            </td>
            <td>
                <p><code>ng-untouched</code></p>
            </td>
        </tr>
        <tr>
            <td>
                <p>Control's value has changed</p>
                <p>控件值已经变化</p>
            </td>
            <td>
                <p><code>ng-dirty</code></p>
            </td>
            <td>
                <p><code>ng-pristine</code></p>
            </td>
        </tr>
        <tr>
            <td>
                <p>Control's value is valid</p>
                <p>控件值是有效的</p>
            </td>
            <td>
                <p><code>ng-valid</code></p>
            </td>
            <td>
                <p><code>ng-invalid</code></p>
            </td>
        </tr>
    </table>
</div>